﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestSubGrid.aspx.cs" Inherits="HMS.PL.Forms.TestSubGrid" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="../Scripts/jquery-1.6.1.js"></script>
    <link type="text/css" rel="stylesheet" href="../themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
    <link type="text/css" href="../themes/ui-lightness/jquery.ui.all.css" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" href="../Style/!style1.css" />
    <%--jqgrid files--%>
    <link type="text/css" rel="stylesheet" href="../css/ui.jqgrid.css" />
    <link type="text/css" rel="stylesheet" href="../css/ui.multiselect.css" />
    <link type="text/css" rel="stylesheet" href="../themes/redmond/jquery-ui-1.8.1.custom.css" />
    <script src="../Scripts/jquery.layout-latest.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/jqModal.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/grid.base.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/grid.common.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/grid.formedit.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/grid.inlinedit.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/grid.jqueryui.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/jquery.contextmenu.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/jquery.tablednd.js" type="text/javascript"></script>
    <%-- <script src="../Scripts/jqgrid/grid.formedit.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/grid.inlinedit.js" type="text/javascript"></script>--%>
    <script src="../Scripts/jqgrid/jqDnR.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/grid.filter.js" type="text/javascript"></script>
    <script src="../Scripts/jqgrid/grid.subgrid.js" type="text/javascript"></script>
    <%--     jquery-ui-1.8.1.custom.css--%>
    <%--jqgrid files--%>
    <script type="text/javascript" src="../Scripts/formsScript/welcome.js"></script>
    <script type="text/javascript" src="../Scripts/formsScript/master.js"></script>
    <script type="text/javascript" src="../Scripts/formsScript/addRelation.js"></script>
    <script type="text/javascript" src="../Scripts/jqgrid/jquery.searchFilter.js"></script>
    <script type="text/javascript" src="../Scripts/common.js"></script>
    <script type="text/javascript">

        jQuery(document).ready(function () {
            //debugger;
            var dimtable_name = "M_CONTACTS";
            var list_id = 5;

            //fill grid of columns
            $.ajax({
                async: true,
                type: 'GET',
                url: "MasterCallback.aspx?operation=get_gridColdataMatchRule&dimtable_name=" + dimtable_name + "&list_id=" + list_id,
                data: "",
                dataType: "json",
                success: function (result) {
                    //debugger;
                    //var colD = result.datarow, colN = result.columns, colM = result.colModelList;
                    var colN = result.columns, colM = result.colModelList;
                    $("#dataGrid").GridUnload(); // destroy the grid saving the table and pager

                    jQuery("#dataGrid").jqGrid({
                        url: "MasterCallback.aspx?operation=get_griddataMatchRule&dimtable_name=" + dimtable_name + "&list_id=" + list_id,
                        datatype: 'json',
                        gridview: true,
                        colNames: result.columns,
                        colModel: result.colModelList,
                        caption: "Master Data",
                        rowNum: 10,
                        pager: '#pager',
                        rowList: [10, 20, 30],
                        //sortname: result.primarykey,
                        sortorder: "desc",
                        width: "800px",
                        height: "100%",
                        scrollOffset: 18,
                        closeAfterEdit: true,
                        ignoreCase: true,
                        multiselect: true,
                        //subGrid: true,
                        //                        jsonReader: { root: "rows",
                        //                            page: "page", total: "total",
                        //                            records: "records",
                        //                            repeatitems: true, cell: "cell", id: "id", 
                        //                                       subgrid: { root: "rows", repeatitems: true, cell: "cell", id: "contact_id"} },
                        //subGridUrl: "MasterCallback.aspx?operation=get_griddataSubGrid&dimtable_name=" + dimtable_name + "&list_id=" + list_id,
                        //                        subGridModel: [
                        //                                                                                          {
                        //                                                                                              name: result.columns,
                        //                                                                                              width: [150, 150, 150, 150, 150, 150, 150, 150],
                        //                                                                                              align: ['left', 'left', 'right', 'right', 'right', 'right', 'right', 'right'],
                        //                                                                                              params: [result.primarykey, 'MASTER_ID', 'MANUAL_RULE_ID']
                        //                                                                                          }
                        //                                                                                        ],

                        //                        subGridRowExpanded: function (subgrid_id, row_id) {
                        //                            //debugger;
                        //                            // we pass two parameters
                        //                            // subgrid_id is a id of the div tag created within a table
                        //                            // the row_id is the id of the row
                        //                            // If we want to pass additional parameters to the url we can use
                        //                            // the method getRowData(row_id) - which returns associative array in type name-value
                        //                            // here we can easy construct the following
                        //                            var subgrid_table_id;
                        //                            // var data = getRowData();
                        //                            //var mayfirst_data_row = $("#" + subgrid_table_id).getRowdata(row_id);

                        //                            // var xref_id = jQuery("#dtXMasterList").jqGrid('getGridParam', 'selrow');                        

                        //                            subgrid_table_id = subgrid_id + "_t";

                        //                            //var mast_id = jQuery("#dataGrid").getRowData(row_id)['MASTER_ID'];
                        //                            var mast_id = $("#dataGrid").jqGrid('getCell', row_id, 'MASTER_ID');

                        //                            jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
                        //                            jQuery("#" + subgrid_table_id).jqGrid({
                        //                                // url: "subgrid.php?q=2&id=" + row_id,
                        //                                url: "MasterCallback.aspx?operation=get_griddataSubGrid&dimtable_name=" + dimtable_name + "&list_id=" + list_id + "&MASTER_ID=" + mast_id,  //MASTER_ID
                        //                                datatype: "json",
                        //                                colNames: result.columns,
                        //                                colModel: result.colModelList,
                        //                                height: '100%',
                        //                                rowNum: 20,
                        //                                sortname: result.primarykey,
                        //                                sortorder: "asc",
                        //                                loadComplete: function (data) {
                        //                                    //debugger;
                        //                                    //jQuery("#" + subgrid_table_id).hideCol(result.primarykey);
                        //                                    jQuery("#" + subgrid_table_id).setGridWidth("950", true);
                        //                                }
                        //                            });
                        //                        },

                        loadComplete: function (data) {
                            // debugger;
                            jQuery("#dataGrid").hideCol(result.primarykey);
                            jQuery("#dataGrid").setGridWidth("950", true);
                            //$('#jqg_dataGrid_2').attr('disabled', 'true');
                            // $('#jqg_dataGrid_2').hide();

                            if (data.rows.length > 0) {
                                for (var i = 0; i < data.rows.length; i++) {
                                    if (data.rows[i].cell[7] == '0') {
                                        //$("#jqg_OrdersGrid_" + data.rows[i].id).css("visibility", "hidden");
                                        var rowid = data.rows[i].cell[0];
                                        $("#jqg_dataGrid_" + rowid).hide();
                                        $("#jqg_dataGrid_" + rowid).attr('disabled', 'true');
                                        // $('#' + rowid, '#dataGrid').attr('disabled', 'true');
                                    }
                                }
                            }
                        },

                        beforeSelectRow: function (rowid, e) {
                            //debugger;
                            var cbsdis = $("tr#" + rowid + ".jqgrow > td > input.cbox:disabled", "#dataGrid");
                            if (cbsdis.length === 0) {
                                return true;    // allow select the row
                            } else {
                                return false;   // not allow select the row
                            }
                        },
                        onSelectAll: function (aRowids, status) {
                            // debugger;
                            if (status) {
                                // uncheck "protected" rows
                                var cbs = $("tr.jqgrow > td > input.cbox:disabled", "#dataGrid");
                                // var cbs = $("tr.jqgrow > td > input.cbox:display", "#dataGrid");

                                cbs.removeAttr("checked");
                                jQuery("#dataGrid").find("tr.jqgrow:has(td > input.cbox:disabled)").removeClass("ui-state-highlight");
                                //modify the selarrrow parameter
                                jQuery("#dataGrid").p.selarrrow = jQuery("#dataGrid").find("tr.jqgrow:has(td > input.cbox:checked)")
                                    .map(function () { return this.id; }) // convert to set of ids
                                    .get(); // convert to instance of Array
                            }
                        },

                        //                        gridComplete: function () {
                        //                           // debugger;
                        //                            var i = 0;
                        //                            var rowIds = $("#dataGrid").getDataIDs();
                        //                          //  $("#dataGrid").expandSubGridRow(10);
                        //                            $.each(rowIds, function (index, rowId) {
                        //                                //debugger;
                        //                                $("#dataGrid").expandSubGridRow(rowId);
                        //                            });

                        //                        },
                        loadError: function (xhr, status, error) {
                            alert('error');
                        }
                    });
                },
                error: function (x, e) {
                    //debugger;
                    alert(x.readyState + " " + x.status + " " + e.msg);
                }
            });

            //debugger;

            //////////////
            //            jQuery("#dataGrid").jqGrid({
            //                url: 'example.php',
            //                datatype: 'json',
            //                mtype: 'GET',
            //                colNames: ['Inv No', 'Date', 'Amount', 'Tax', 'Total', 'Notes'],
            //                colModel: [
            //                  { name: 'invid', index: 'invid', width: 55 },
            //                  { name: 'invdate', index: 'invdate', width: 90 },
            //                  { name: 'amount', index: 'amount', width: 80, align: 'right' },
            //                  { name: 'tax', index: 'tax', width: 80, align: 'right' },
            //                  { name: 'total', index: 'total', width: 80, align: 'right' },
            //                  { name: 'note', index: 'note', width: 150, sortable: false }
            //                ],
            //                            pager: '#pager',
            //                            rowNum: 10,
            //                            rowList: [10, 20, 30],
            //                            sortname: 'invid',
            //                            sortorder: 'desc',
            //                            viewrecords: true,
            //                            caption: 'My first grid',
            //                            subGrid: true,
            //                            subGridUrl: "subgrid.php",
            //                            subGridModel: [
            //                  {
            //                      name: ['No', 'Item', 'Qty', 'Unit', 'Line Total'],
            //                      width: [55, 200, 80, 80, 80],
            //                      align: ['left', 'left', 'right', 'right', 'right'],
            //                      params: ['invdate']
            //                  }
            //                ]
            //              }); 


            ///////////////////
            $("#test").click(function () {
              //debugger;
                // var Ids = jQuery("#dataGrid").getGridParam('selarrrow');

                var Ids = jQuery("#dataGrid").find("tr.jqgrow:has(td > input.cbox:checked)")
                                    .map(function () { return this.id; }) // convert to set of ids
                                    .get(); // convert to instance of Array

                $("#sp_id").value = Ids;
            });
        });
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="dataGrid" class="scroll" cellpadding="0" cellspacing="0">
        </table>
        <div id="pager" class="scroll">
        </div>
    </div>
    <div>
        <input id="test" type="button" value="Add Relation" style="margin-top: 10px" class="submit-button" />
        <span ID="sp_id">bb</span>
    </div>
    </form>
</body>
</html>
